// xxx.js
var timer
var datachange

export default {
    data: {
//        option: {
//            chartZone: [40,40,250,250],   //图表左上角与右下角坐标数组
//            yAxisLable: [1,2,3,4,5,6,7,8],  //Y轴内容
//            yMax: 30, //Y轴最大值
//            guideLine:true, //是否存在辅助线
//            xAxisLable: [1,2,3,4], //x轴内容
//            data: [2,3,4,5,6,7,8], //数据内容
//            barStyle:{
//                width: 3,  //数据条的宽
//                color: 'red'   //数据条的颜色
//            },
//            axisArrow:{
//                size:5,    //箭头因子大小
//                color:'yellow'    //箭头填充色
//            },
//        },
//
//        X:2560,
//        Y:1600,
//        option: {
//            chartZone: [50, 50, 1000, 600], //图表左上角与右下角坐标数组
//            yAxisLable: [0, 100, 200, 300, 400, 500], //Y轴内容
//            yMax: 500, //Y轴最大值
//            guideLine: true, //是否存在辅助线
//            xAxisLable: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"], //x轴内容
//            data: [150, 200, 250, 300, 100, 500, 200], //数据内容
//            barStyle: {
//                width: 30, //数据条的宽
//                color: 'rgb(25, 183, 207)' //数据条的颜色
//            },
//            axisArrow: {
//                size: 2, //箭头因子大小
//                color: 'red' //箭头填充色
//            }
//        }

    },
//    onInit() {
//        this.onShow()
//    },
//    onShow() {
//        this.draw()
//        const el =this.$refs.canvas;
//        const ctx = el.getContext('2d');
//        ctx.restore();
//        const el = this.$refs.canvas;
//        const ctx = el.getContext('2d');

//    },
//    onActive() {
//       this.onShow()
//    },

//    onReady() {
//        this.draw()
//    },

    onInit() {
        timer = setInterval(this.draw, 1000)
        console.info('使用柱状图工具定时器')
    },

    onHide() {
        clearInterval(timer)
        console.info('停止柱状图工具定时器')
    },

    draw() {
        const el = this.$element('the-canvas'); // 绑定id
        const context = el.getContext('2d'); // 获取canvas绘图上下文。不支持在onInit和onReady中进行调用

        // 当数据更新时重新绘制
        if (datachange != []) {
            context.beginPath()
            for (var k = 0; k < this.option.data.length; k++) {
//                console.info(k)
//                console.info('111111111'+datachange[k])
//                console.info('111111111'+typeof datachange[k])
//                console.info('222222222'+this.option.data[k])
//                console.info('222222222'+typeof this.option.data[k])
//                console.info(k)
                if(Number(datachange[k]) != Number(this.option.data[k])) {
                    context.save()
                    context.clearRect(this.option.chartZone[0], this.option.chartZone[1], this.option.chartZone[2], this.option.chartZone[3])
                    context.restore()
                }
            }
        }
//        console.info(111111111111)
//        const el = this.$element('the-canvas'); // 绑定id
//        const el =this.$refs.canvas;
//        const context = el.getContext('2d'); // 获取canvas绘图上下文。不支持在onInit和onReady中进行调用
        this.drawAxis()
        this.drawYLables()
        this.drawXLables()
        this.drawData()
//        this.drawData2()
        this.drawArrowX()
        this.drawArrowY()
    },
    //绘制X，Y坐标轴
    drawAxis() {
        let chartZone = this.option.chartZone
        const el = this.$element('the-canvas'); // 绑定id
        const context = el.getContext('2d'); // 获取canvas绘图上下文。不支持在onInit和onReady中进行调用
        context.lineWidth = 4 // 坐标轴粗细
        context.strokeStyle = '#353535' // 设置描边的颜色，即坐标轴颜色
        context.moveTo(chartZone[0], chartZone[1]) // 路径从当前点移动到指定点，移动过程中不绘制线条
        context.lineTo(chartZone[0], chartZone[3]) // 从当前点绘制一条直线到目标点
        context.lineTo(chartZone[2], chartZone[3]) // 从当前点绘制一条直线到目标点

        // 显示横纵坐标名称
        context.font = '20px sans-serif'; // 字号和行高、子体系列
        var xwidth = context.measureText(this.option.xtext).width // 横坐标字长
        context.fillText(this.option.ytext, chartZone[0]-35, chartZone[1]-23); // 绘制填充类文本，纵轴
        context.fillText(this.option.xtext, chartZone[2]-xwidth+35, chartZone[3]+45); // 绘制填充类文本，横轴
        context.stroke() // 进行边框绘制操作
    },
    // y轴细化
    drawYLables() {
        const el = this.$element('the-canvas'); // 绑定id
        const context = el.getContext('2d'); // 获取canvas绘图上下文。不支持在onInit和onReady中进行调用
        context.save() // 对当前的绘图上下文进行保存
        let labels = this.option.yAxisLable; // Y轴内容
        let yLength = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.95
        // 画Y轴时，我们一般不会直接用Y轴的真正长度来均分我们的Y轴数据，我们需要留一小节顶端来保持美感且在后续拿来画箭头。所以我们真正使用Y轴的长度为整体长度乘以0.95
        let gap = yLength / (labels.length - 1) // 均分y轴
        let option = this.option // 取值
        labels.forEach(function (label, index) { // 循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件
            // forEach：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-rending-control-syntax-foreach-0000001149978669
            //绘制坐标文字
            //offset为y轴上内容起点与y轴的距离
            let offset = context.measureText(label).width + 20 // 算出字体的长度，再加一段距离用offset存储该值，留作用来计算画Y轴上数值内容的x坐标
            context.strokeStyle = '#eaeaea'; // 设置描边的颜色
            context.font = "16px" // 字号和行高
            context.fillText(label, option.chartZone[0] - offset, option.chartZone[3] - index * gap + 5); // 在纵轴上绘制填充类文本
            context.restore() // 对保存的绘图上下文进行恢复
            //绘制小间隔（坐标轴原点不需要绘制小间隔）
            if (index == 0) {
                return
            } else {
                context.beginPath(); // 创建一个新的绘制路径
                context.strokeStyle = '#353535'; // 设置描边的颜色
//                context.strokeStyle = 'red'; // 设置描边的颜色
                context.lineWidth = 5 // 线的粗细
                //我们在此处将小间隔的长度设置为10px
                for(var i = 1; i < labels.length; i++) {
//                    context.beginPath(); // 创建一个新的绘制路径
//                    context.moveTo(option.chartZone[0] - 10, option.chartZone[3] - index * gap * i);
//                    context.lineTo(option.chartZone[0], option.chartZone[3] - index * gap * i)
                    context.moveTo(option.chartZone[0] - 10, option.chartZone[3] - gap * i);
                    context.lineTo(option.chartZone[0], option.chartZone[3] - gap * i)
                }
                context.stroke() // 进行边框绘制操作
            }
            //绘制辅助线
            if (option.guideLine == true) {
                //x轴坐标不需要绘制辅助线
                if (index == 0) {
                    return
                } else {
                    context.beginPath() // 创建一个新的绘制路径
                    context.strokeStyle = '#dd808080' // 设置描边的颜色
                    context.lineWidth = 2 // 线的粗细
//                    context.moveTo(option.chartZone[0], option.chartZone[3] - index * gap)
//                    context.lineTo(option.chartZone[2], option.chartZone[3] - index * gap)
                    for(var j = 1; j < labels.length; j++) {
                        context.moveTo(option.chartZone[0], option.chartZone[3] - gap * j);
                        context.lineTo(option.chartZone[2], option.chartZone[3] - gap * j)
                    }
                    context.stroke() // 进行边框绘制操作
                }
            }
        })
    },
    // x轴细化
    drawXLables() {
        const el = this.$element('the-canvas'); // 绑定id
        const context = el.getContext('2d'); // 获取canvas绘图上下文。不支持在onInit和onReady中进行调用
        let labels = this.option.xAxisLable;
        //和Y轴真正使用到的长度类似，X轴我们设定只用了90%
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.90
        let gap = xLength / (labels.length)
        let option = this.option
        labels.forEach(function (label, index) {
            //绘制坐标文字
            let offset = context.measureText(label).width
            context.save()
            context.strokeStyle = '#eaeaea';
            context.font = "18px"
            context.fillText(label, option.chartZone[0] + (index + 1) * gap - offset, option.chartZone[3] + 20);
            //绘制小间隔
            context.beginPath();
            context.strokeStyle = '#353535';
            context.lineWidth = 5 // 线的粗细
            context.moveTo(option.chartZone[0] + (index + 1) * gap - offset / 2, option.chartZone[3]);
            context.lineTo(option.chartZone[0] + (index + 1) * gap - offset / 2, option.chartZone[3] + 5)
            context.stroke()
            //存储偏移量
            option.offsetXLabel = offset / 2 // 柱体距y轴距离
            context.restore()
        })
    },
    drawData() {
        //柱状图
        const el = this.$element('the-canvas'); // 绑定id
        const context = el.getContext('2d'); // 获取canvas绘图上下文。不支持在onInit和onReady中进行调用
//        datachange = this.option.data
//        for (var k = 0; k < this.option.data.length; k++) {
//            datachange[k] != this.option.data[k]
//            context.fillRect(this.option.chartZone[0], this.option.chartZone[1], this.option.chartZone[2], this.option.chartZone[3])
//            context.fillStyle = 'white'
//        }


        context.save() // 对当前的绘图上下文进行保存
        let data = this.option.data // 取值
        let xLength = (this.option.chartZone[2] - this.option.chartZone[0]) * 0.90
        let ylength = (this.option.chartZone[3] - this.option.chartZone[1]) * 0.95
        let gap = xLength / this.option.xAxisLable.length;
        let option = this.option
        var temp = this.option.yAxisLable[0] // 取得y轴数据中最大值
        for(var i = 0; i < this.option.yAxisLable.length; i++) {
            if (temp < this.option.yAxisLable[i+1]) {
                temp = this.option.yAxisLable[i+1]
            }
        }
        var height2 = [];
        data.forEach(function (item, index) {
//            context.fillStyle = option.barStyle.color || '#1abc9c';
            context.fillStyle = option.barStyle.color;
            let x0 = option.chartZone[0] + (index + 1) * gap - option.barStyle.width / 2 - option.offsetXLabel;
            if(index == 0) {
                x0 = x0 + 5
            }
            let height = item / temp * ylength
            let y0 = option.chartZone[3] - height
            let width = option.barStyle.width
            context.fillRect(x0, y0, width, height) // 填充一个矩形

            height2.push(height)
//            console.info('类型：'+ typeof height2)
        })
        context.restore()

        if(this.option.dataInfoShow == true) {
            this.option.dataInfo.forEach(function (info, index) {
                // 显示柱状图文字信息
                let offset = (context.measureText(info).width)*0.9
                context.save()
                context.strokeStyle = '#eaeaea';
                context.font = "18px sans-serif"
                //            context.fillText(info, option.chartZone[0] + (index + 1) * gap - offset, option.chartZone[3] - 10 - height2[index]);
                context.fillText(info, option.chartZone[0] + (index + 1) * gap - offset - 10, option.chartZone[3] - 10 - height2[index]);
                context.restore() // 对保存的绘图上下文进行恢复
                //            context.stroke()
            })
        }
    },
    drawArrowX() {
        //绘制x轴箭头
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size; // 取值，箭头大小因子
        context.save()
        context.beginPath()
        context.moveTo(this.option.chartZone[2], this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] - 3 * factor)
        context.lineTo(this.option.chartZone[2] + 10 * factor, this.option.chartZone[3])
        context.lineTo(this.option.chartZone[2] + 2 * factor, this.option.chartZone[3] + 3 * factor)
        context.lineTo(this.option.chartZone[2], this.option.chartZone[3])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()
        context.beginPath();
    },
    drawArrowY() {
        //绘制y轴箭头
        const el = this.$element('the-canvas');
        const context = el.getContext('2d');
        let factor = this.option.axisArrow.size;
        context.save()
        context.beginPath()
        context.moveTo(this.option.chartZone[0], this.option.chartZone[1])
        context.lineTo(this.option.chartZone[0] - 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1] - 10 * factor)
        context.lineTo(this.option.chartZone[0] + 3 * factor, this.option.chartZone[1] - 2 * factor)
        context.lineTo(this.option.chartZone[0], this.option.chartZone[1])
        context.globalAlpha = 0.7
        context.fillStyle = this.option.axisArrow.color
        context.fill()
        context.restore()

        datachange = this.option.data
    },
}